<template>
  <div class="laundry-option-management">
    <div class="page-header">
      <h2 class="page-title">洗衣选项管理</h2>
    </div>

    <div class="options-container">
      <!-- 套餐管理 -->
      <el-card class="option-card">
        <div class="card-header">
          <h3>套餐管理</h3>
          <el-button type="primary" size="small" @click="openCreateDialog('package')" icon="el-icon-plus">新增套餐</el-button>
        </div>
        <el-table
            :data="packages"
            style="width: 100%"
            border
            v-loading="loading"
            class="custom-table"
            :default-sort="{ prop: 'packageId', order: 'ascending' }"
        >
          <el-table-column prop="packageId" label="套餐ID" width="100" align="center" sortable />
          <el-table-column prop="packageName" label="名称" min-width="150" />
          <el-table-column prop="duration" label="时长(分钟)" width="120" align="center" />
          <el-table-column prop="price" label="价格(元)" width="120" align="center">
            <template #default="scope">
              {{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                  type="primary"
                  size="small"
                  @click="openEditDialog(scope.row, 'package')"
                  icon="el-icon-edit"
              >
                编辑
              </el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="deleteOption(scope.row.packageId, 'package')"
                  icon="el-icon-delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              background
              v-model:current-page="packagePage"
              :page-size="pageSize"
              :total="packageTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="fetchOptions"
          />
        </div>
      </el-card>

      <!-- 水量选项管理 -->
      <el-card class="option-card">
        <div class="card-header">
          <h3>水量选项管理</h3>
          <el-button type="primary" size="small" @click="openCreateDialog('water')" icon="el-icon-plus">新增水量选项</el-button>
        </div>
        <el-table
            :data="waterOptions"
            style="width: 100%"
            border
            v-loading="loading"
            class="custom-table"
            :default-sort="{ prop: 'waterOptionId', order: 'ascending' }"
        >
          <el-table-column prop="waterOptionId" label="水量ID" width="100" align="center" sortable />
          <el-table-column prop="waterAmount" label="水量(L)" width="120" align="center" />
          <el-table-column prop="price" label="价格(元)" width="120" align="center">
            <template #default="scope">
              {{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                  type="primary"
                  size="small"
                  @click="openEditDialog(scope.row, 'water')"
                  icon="el-icon-edit"
              >
                编辑
              </el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="deleteOption(scope.row.waterOptionId, 'water')"
                  icon="el-icon-delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              background
              v-model:current-page="waterPage"
              :page-size="pageSize"
              :total="waterTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="fetchOptions"
          />
        </div>
      </el-card>

      <!-- 洗涤程序选项管理 -->
      <el-card class="option-card">
        <div class="card-header">
          <h3>洗涤程序选项管理</h3>
          <el-button type="primary" size="small" @click="openCreateDialog('washing')" icon="el-icon-plus">新增洗涤程序</el-button>
        </div>
        <el-table
            :data="washingOptions"
            style="width: 100%"
            border
            v-loading="loading"
            class="custom-table"
            :default-sort="{ prop: 'programId', order: 'ascending' }"
        >
          <el-table-column prop="programId" label="程序ID" width="100" align="center" sortable />
          <el-table-column prop="programName" label="名称" min-width="150" />
          <el-table-column prop="duration" label="时长(分钟)" width="120" align="center" />
          <el-table-column prop="price" label="价格(元)" width="120" align="center">
            <template #default="scope">
              {{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                  type="primary"
                  size="small"
                  @click="openEditDialog(scope.row, 'washing')"
                  icon="el-icon-edit"
              >
                编辑
              </el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="deleteOption(scope.row.programId, 'washing')"
                  icon="el-icon-delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              background
              v-model:current-page="washingPage"
              :page-size="pageSize"
              :total="washingTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="fetchOptions"
          />
        </div>
      </el-card>

      <!-- 洗涤剂香味选项管理 -->
      <el-card class="option-card">
        <div class="card-header">
          <h3>洗涤剂香味选项管理</h3>
          <el-button type="primary" size="small" @click="openCreateDialog('scent')" icon="el-icon-plus">新增香味选项</el-button>
        </div>
        <el-table
            :data="scentOptions"
            style="width: 100%"
            border
            v-loading="loading"
            class="custom-table"
            :default-sort="{ prop: 'scentId', order: 'ascending' }"
        >
          <el-table-column prop="scentId" label="香味ID" width="100" align="center" sortable />
          <el-table-column prop="scentName" label="名称" min-width="150" />
          <el-table-column prop="price" label="价格(元)" width="120" align="center">
            <template #default="scope">
              {{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                  type="primary"
                  size="small"
                  @click="openEditDialog(scope.row, 'scent')"
                  icon="el-icon-edit"
              >
                编辑
              </el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="deleteOption(scope.row.scentId, 'scent')"
                  icon="el-icon-delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              background
              v-model:current-page="scentPage"
              :page-size="pageSize"
              :total="scentTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="fetchOptions"
          />
        </div>
      </el-card>

      <!-- 烘干程序选项管理 -->
      <el-card class="option-card">
        <div class="card-header">
          <h3>烘干程序选项管理</h3>
          <el-button type="primary" size="small" @click="openCreateDialog('drying')" icon="el-icon-plus">新增烘干程序</el-button>
        </div>
        <el-table
            :data="dryingOptions"
            style="width: 100%"
            border
            v-loading="loading"
            class="custom-table"
            :default-sort="{ prop: 'dryingId', order: 'ascending' }"
        >
          <el-table-column prop="dryingId" label="烘干ID" width="100" align="center" sortable />
          <el-table-column prop="dryingName" label="名称" min-width="150" />
          <el-table-column prop="duration" label="时长(分钟)" width="120" align="center" />
          <el-table-column prop="price" label="价格(元)" width="120" align="center">
            <template #default="scope">
              {{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                  type="primary"
                  size="small"
                  @click="openEditDialog(scope.row, 'drying')"
                  icon="el-icon-edit"
              >
                编辑
              </el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="deleteOption(scope.row.dryingId, 'drying')"
                  icon="el-icon-delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              background
              v-model:current-page="dryingPage"
              :page-size="pageSize"
              :total="dryingTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="fetchOptions"
          />
        </div>
      </el-card>
    </div>

    <!-- 编辑/新增对话框 -->
    <el-dialog
        v-model="editDialogVisible"
        :title="isCreating ? ('新增' + editTypeName) : ('编辑' + editTypeName)"
        width="500px"
        custom-class="custom-dialog"
        :close-on-click-modal="false"
    >
      <el-form :model="editForm" label-width="120px" class="dialog-form" ref="editFormRef" :rules="editRules">
        <el-form-item
            v-if="editType === 'package' || editType === 'washing' || editType === 'scent' || editType === 'drying'"
            label="名称"
            prop="name"
        >
          <el-input v-model="editForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item v-if="editType === 'water'" label="水量(L)" prop="waterAmount">
          <el-input v-model.number="editForm.waterAmount" type="number" placeholder="请输入水量" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model.number="editForm.price" type="number" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item
            v-if="editType === 'package' || editType === 'washing' || editType === 'drying'"
            label="时长(分钟)"
            prop="duration"
        >
          <el-input v-model.number="editForm.duration" type="number" placeholder="请输入时长" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editForm.description" type="textarea" placeholder="请输入描述" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOption" :loading="submitting">{{ isCreating ? '创建' : '保存' }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LaundryOptionManagement',
  data() {
    return {
      packages: [],
      waterOptions: [],
      washingOptions: [],
      scentOptions: [],
      dryingOptions: [],
      loading: false,
      submitting: false,
      packagePage: 1,
      waterPage: 1,
      washingPage: 1,
      scentPage: 1,
      dryingPage: 1,
      pageSize: 10,
      packageTotal: 0,
      waterTotal: 0,
      washingTotal: 0,
      scentTotal: 0,
      dryingTotal: 0,
      editDialogVisible: false,
      editForm: {},
      editType: '',
      editTypeName: '',
      isCreating: false,
      editRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur' },
        ],
        waterAmount: [
          { required: true, message: '请输入水量', trigger: 'blur' },
          { type: 'number', message: '水量必须为数字', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '') {
                callback(new Error('水量不能为空'));
              } else if (value < 0) {
                callback(new Error('水量不能为负数'));
              } else if (value > 99999999.99) {
                callback(new Error('水量不能超过99999999.99'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { type: 'number', message: '价格必须为数字', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '') {
                callback(new Error('价格不能为空'));
              } else if (value < 0) {
                callback(new Error('价格不能为负数'));
              } else if (value > 99999999.99) {
                callback(new Error('价格不能超过99999999.99'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        duration: [
          { required: true, message: '请输入时长', trigger: 'blur' },
          { type: 'number', message: '时长必须为数字', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '') {
                callback(new Error('时长不能为空'));
              } else if (value < 0) {
                callback(new Error('时长不能为负数'));
              } else if (value > 99999999.99) {
                callback(new Error('时长不能超过99999999.99'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    adminInfo() {
      return this.$store.state.adminInfo || JSON.parse(sessionStorage.getItem('adminInfo')) || {
        username: '超级星',
        role: 'super',
      };
    },
    isCollapsed() {
      return this.$parent.isCollapsed; // 从父组件 layout.vue 获取 isCollapsed
    },
  },
  watch: {
    isCollapsed() {
      this.$nextTick(() => {
        this.adjustLayout(); // 菜单栏状态变化时调整布局
      });
    },
  },
  mounted() {
    this.fetchOptions();
    this.$nextTick(() => {
      this.adjustLayout(); // 初次加载时调整布局
    });
  },
  methods: {
    adjustLayout() {
      const content = this.$el.querySelector('.laundry-option-management');
      if (content) {
        content.style.width = this.isCollapsed ? 'calc(100% - 60px)' : 'calc(100% - 220px)';
      }
    },
    async fetchOptions() {
      try {
        this.loading = true;
        const token = sessionStorage.getItem('token');
        if (!token) {
          this.$message.error('未登录，请先登录');
          this.$router.push('/');
          return;
        }

        const role = this.adminInfo.role;
        const username = encodeURIComponent(this.adminInfo.username);

        const response = await axios.get(axios.defaults.baseURL+'/api/laundry-options', {
          params: {
            packagePage: this.packagePage,
            waterPage: this.waterPage,
            washingPage: this.washingPage,
            scentPage: this.scentPage,
            dryingPage: this.dryingPage,
            size: this.pageSize,
          },
          headers: {
            Authorization: `Bearer ${token}`,
            Role: role,
            Username: username,
          },
        });

        this.packages = response.data.packages || [];
        this.packageTotal = response.data.packageTotal || 0;

        this.waterOptions = response.data.waterOptions || [];
        this.waterTotal = response.data.waterTotal || 0;

        this.washingOptions = response.data.washingOptions || [];
        this.washingTotal = response.data.washingTotal || 0;

        this.scentOptions = response.data.scentOptions || [];
        this.scentTotal = response.data.scentTotal || 0;

        this.dryingOptions = response.data.dryingOptions || [];
        this.dryingTotal = response.data.dryingTotal || 0;
      } catch (error) {
        this.$message.error('获取洗衣选项失败: ' + (error.response?.data?.message || error.message));
      } finally {
        this.loading = false;
      }
    },
    openEditDialog(row, type) {
      this.isCreating = false;
      this.editType = type;
      this.editTypeName = {
        package: '套餐',
        water: '水量选项',
        washing: '洗涤程序选项',
        scent: '洗涤剂香味选项',
        drying: '烘干程序选项',
      }[type];

      this.editForm = { ...row };
      if (type === 'package') {
        this.editForm.name = row.packageName;
        this.editForm.price = Number(row.price); // 确保为数字
        this.editForm.duration = Number(row.duration); // 确保为数字
      } else if (type === 'water') {
        this.editForm.waterAmount = Number(row.waterAmount); // 确保为数字
        this.editForm.price = Number(row.price); // 确保为数字
      } else if (type === 'washing') {
        this.editForm.name = row.programName;
        this.editForm.price = Number(row.price); // 确保为数字
        this.editForm.duration = Number(row.duration); // 确保为数字
      } else if (type === 'scent') {
        this.editForm.name = row.scentName;
        this.editForm.price = Number(row.price); // 确保为数字
      } else if (type === 'drying') {
        this.editForm.name = row.dryingName;
        this.editForm.price = Number(row.price); // 确保为数字
        this.editForm.duration = Number(row.duration); // 确保为数字
      }
      this.editDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.editFormRef.clearValidate(); // 清除校验状态
      });
    },
    openCreateDialog(type) {
      this.isCreating = true;
      this.editType = type;
      this.editTypeName = {
        package: '套餐',
        water: '水量选项',
        washing: '洗涤程序选项',
        scent: '洗涤剂香味选项',
        drying: '烘干程序选项',
      }[type];

      this.editForm = {
        name: type !== 'water' ? '' : undefined,
        waterAmount: type === 'water' ? null : undefined,
        price: null,
        duration: type === 'package' || type === 'washing' || type === 'drying' ? null : undefined,
        description: '',
      };
      this.editDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.editFormRef.clearValidate(); // 清除校验状态
      });
    },
    async saveOption() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;

        try {
          this.submitting = true;
          const token = sessionStorage.getItem('token');
          const role = this.adminInfo.role;
          const username = encodeURIComponent(this.adminInfo.username);

          console.log('保存的数据:', this.editForm); // 调试输出

          let url, data, method;
          if (this.isCreating) {
            method = 'post';
            switch (this.editType) {
              case 'package':
                url = axios.defaults.baseURL+'/api/laundry-options/package';
                data = {
                  packageName: this.editForm.name,
                  duration: this.editForm.duration,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'water':
                url = axios.defaults.baseURL+'/api/laundry-options/water-option';
                data = {
                  waterAmount: this.editForm.waterAmount,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'washing':
                url = axios.defaults.baseURL+'/api/laundry-options/washing-option';
                data = {
                  programName: this.editForm.name,
                  duration: this.editForm.duration,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'scent':
                url = axios.defaults.baseURL+'/api/laundry-options/scent-option';
                data = {
                  scentName: this.editForm.name,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'drying':
                url = axios.defaults.baseURL+'/api/laundry-options/drying-option';
                data = {
                  dryingName: this.editForm.name,
                  duration: this.editForm.duration,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
            }
          } else {
            method = 'put';
            switch (this.editType) {
              case 'package':
                url = axios.defaults.baseURL+'api/laundry-options/package';
                data = {
                  packageId: this.editForm.packageId,
                  packageName: this.editForm.name,
                  duration: this.editForm.duration,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'water':
                url = axios.defaults.baseURL+'/api/laundry-options/water-option';
                data = {
                  waterOptionId: this.editForm.waterOptionId,
                  waterAmount: this.editForm.waterAmount,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'washing':
                url = axios.defaults.baseURL+'/api/laundry-options/washing-option';
                data = {
                  programId: this.editForm.programId,
                  programName: this.editForm.name,
                  duration: this.editForm.duration,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'scent':
                url = axios.defaults.baseURL+'/api/laundry-options/scent-option';
                data = {
                  scentId: this.editForm.scentId,
                  scentName: this.editForm.name,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
              case 'drying':
                url = axios.defaults.baseURL+'/api/laundry-options/drying-option';
                data = {
                  dryingId: this.editForm.dryingId,
                  dryingName: this.editForm.name,
                  duration: this.editForm.duration,
                  price: this.editForm.price,
                  description: this.editForm.description,
                };
                break;
            }
          }

          const response = await axios({
            method: method,
            url: url,
            data: data,
            headers: {
              Authorization: `Bearer ${token}`,
              Role: role,
              Username: username,
            },
          });

          if (response.data.success) {
            this.$message.success(this.isCreating ? `${this.editTypeName}创建成功` : `${this.editTypeName}更新成功`);
            this.editDialogVisible = false;
            this.fetchOptions();
          } else {
            throw new Error(response.data.message || (this.isCreating ? '创建失败' : '更新失败'));
          }
        } catch (error) {
          this.$message.error(
              this.isCreating
                  ? `${this.editTypeName}创建失败: ${error.response?.data?.message || error.message}`
                  : `${this.editTypeName}更新失败: ${error.response?.data?.message || error.message}`
          );
        } finally {
          this.submitting = false;
        }
      });
    },
    async deleteOption(id, type) {
      const typeName = {
        package: '套餐',
        water: '水量选项',
        washing: '洗涤程序选项',
        scent: '洗涤剂香味选项',
        drying: '烘干程序选项',
      }[type];

      this.$confirm(`确认删除此${typeName}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          this.loading = true;
          const token = sessionStorage.getItem('token');
          const role = this.adminInfo.role;
          const username = encodeURIComponent(this.adminInfo.username);

          let url;
          switch (type) {
            case 'package':
              url = `http://localhost:8084/api/laundry-options/package/${id}`;
              break;
            case 'water':
              url = `http://localhost:8084/api/laundry-options/water-option/${id}`;
              break;
            case 'washing':
              url = `http://localhost:8084/api/laundry-options/washing-option/${id}`;
              break;
            case 'scent':
              url = `http://localhost:8084/api/laundry-options/scent-option/${id}`;
              break;
            case 'drying':
              url = `http://localhost:8084/api/laundry-options/drying-option/${id}`;
              break;
          }

          const response = await axios.delete(url, {
            headers: {
              Authorization: `Bearer ${token}`,
              Role: role,
              Username: username,
            },
          });

          if (response.data.success) {
            this.$message.success(`${typeName}删除成功`);
            this.fetchOptions();
          } else {
            throw new Error(response.data.message || '删除失败');
          }
        } catch (error) {
          this.$message.error(`${typeName}删除失败: ${error.response?.data?.message || error.message}`);
        } finally {
          this.loading = false;
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
  },
};
</script>

<style scoped>
.laundry-option-management {
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 96px);
  width: 100%;
  transition: width 0.3s ease;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.options-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
  gap: 24px;
}

.option-card {
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 18px;
  font-weight: 500;
  color: #606266;
  margin: 0;
}

.custom-table {
  border-radius: 8px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header-wrapper th) {
  background-color: #fafafa;
  color: #606266;
  font-weight: 600;
}

.el-table {
  margin: 20px 0;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

.custom-dialog {
  border-radius: 8px;
}

.dialog-form {
  padding: 0 20px;
}

.el-button {
  border-radius: 6px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-button[type="primary"] {
  background: #409eff;
  border-color: #409eff;
}

.el-button[type="danger"] {
  background: #f56c6c;
  border-color: #f56c6c;
}

.el-form-item {
  margin-bottom: 20px;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}
</style>